<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="onAdd">添加</button>
    <ul>
      <todolist-item
        v-for="item in list"
        :key="item.id"
        :value="item.value"
        :id="item.id"
        @onDel="onDel"
        @onEditOk="onEditOk"
      />
    </ul>
  </div>
</template>

<script>
import TodolistItem from './todolist-item.vue';
let idCounter = 0;
export default {
  components: {
    TodolistItem,
  },
  data () {
    return {
      inputValue: '',
      list: [
        // {
        //   id: 0,
        //   value: 'aaa',
        // },
      ],
    };
  },
  methods: {
    // 新增
    onAdd () {
      this.list.push({
        id: idCounter++,
        value: this.inputValue,
      });
    },
    // 删除
    onDel (id) {
      this.list = this.list.filter(item => item.id !== id);
    },
    // 确认修改
    onEditOk (id, value) {
      // 找到数组项 并修改值
      this.list.find(item => item.id === id).value = value;
    },
  },
}
</script>

<style scoped>

</style>